<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      table thead tr {
        width: 800px;
      }
      .one {
        background-color: purple;
      }
      table thead tr th:nth-child(1) {
        width: 200px;
        border: 2px solid #000;
        border-right: 0;
      }
      table thead tr th:nth-child(2) {
        width: 600px;
        border: 2px solid #000;
      }
      tbody tr {
        text-align: center;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <form action="">
      请输入姓名：<input type="text" class="yourname" /> <br />
      请输入邮箱：<input type="email" class="email" /><br />
      <button type="button">添加</button>
      <!-- button默认自动提交，要加上type=button才能变成普通anniu -->
    </form>
    <table>
      <thead>
        <tr class="one">
          <th>姓名</th>
          <th>邮箱</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>小黑</td>
          <td>xiaohei@126.com</td>
        </tr>
      </tbody>
      <script>
        var btn = document.querySelector("button");
        var yourname = document.querySelector(".yourname");
        var email = document.querySelector(".email");
        var shenti = document.querySelector("tbody");
        btn.onclick = function () {
          if (yourname.value == "" || email.value == "") {
            alert("不能输入为空奥");
          } else {
            var tr1 = document.createElement("tr");
            shenti.appendChild(tr1);
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            tr1.appendChild(td1);
            tr1.appendChild(td2);
            td1.innerHTML = yourname.value;
            td2.innerHTML = email.value;
          }
        };
      </script>
    </table>
  </body>
</html>
